<template>
  <div class="personalDetails">
    <div class="box" v-if="isPerson==0">
      <div class="top">
        <div class="img">
          <i class="el-icon-close"></i>
        </div>
        <div class="top-right">
          <p>还未进行个人认证</p>
          <span>认证后可正常使用平台功能</span>
        </div>
      </div>
      <div class="bottom">
        <img src="@/assets/gerenrenzheng.png" alt="" />
        <span @click="jump">个人认证</span>
      </div>
    </div>
  

    <div class="box" v-if="isPerson==1">
      <div class="top">
        <div class="img check">
          <i class="el-icon-circle-check is"></i>
        </div>
        <div class="top-right">
          <p>你已完成个人认证</p>
         
        </div>
      </div>
      <div class="bottom">
        
        <span style="margin-right:5px">目前使用：</span>
        <span>{{name}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getuser } from '@/views/userHome/userhome.js'
import { getItem,setItem } from '../../../utils/store.js'
export default {
  data() {
    return {
      isPerson:'',//是否认证
      name:''//目前使用
    }
  },
  created(){
this.getuser()
  },
  mounted(){
this.isPerson=getItem('USER_INFO').data.data.isPerson
this.name=getItem('USER_INFO').data.data.name

  },
  methods: {
       async getuser() {
      //获取登录用户信息
      try {
        const data = await getuser()
        this.userdata = data.data
        setItem('USER_INFO', data)
        // console.log(data, '登录用户信息存储')
      } catch (error) {
        this.$message.error(error)
        // console.log(error)
      }
    },
    jump() {
      this.$router.push('/authentications')
    },
    
  },
}
</script>

<style lang="less" scoped>
.personalDetails {
  width: 100%;
  height: 100%;
  position: relative;
  .box {
    width: 600px;
    height: 200px;
    border: 1px solid rgb(215, 215, 215);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .top {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      height: 100px;
      .img {
        height: 50px;
        width: 50px;
        color: #ccc;
        font-size: 30px;
        text-align: center;
        line-height: 50px;
        font-weight: bold;
        background-color: rgb(254, 176, 0);
        border-radius: 50%;
      }
      .check {
        background-color: #30c776;
      }
      .top-right {
        margin-left: 20px;
        p {
          font-size: 20px;
          margin-bottom: 10px;
        }
        span {
          font-size: 12px;
          color: rgb(170, 170, 170);
        }
      }
    }
    .bottom {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      img {
        margin-right: 10px;
      }
      span {
        text-align: center;
        line-height: 50px;
        color: rgb(24, 174, 255);
        cursor: pointer;
      }
    }
  }
}
</style>
